<template>
  <span>
    <!--<transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"

      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
    >
      <div class="ff-popover" v-show="popover_show" ref="popper">
        <slot>{{ content }}</slot>
      </div>
    </transition>-->
    <el-collapse-transition>
      <div class="ff-popover" v-show="popover_show" ref="popper">
        <slot>{{ content }}</slot>
      </div>
    </el-collapse-transition>
    <slot name="reference"></slot>
  </span>
</template>
<style type="text/less" lang="less">
    .ff-popover {
        position: absolute;
        white-space: nowrap;
        box-sizing: border-box;
        text-overflow: ellipsis;
        padding: .4em 0;
        font-size: 12px;
        border: 1px solid rgba(0,0,0,.1);
        background: #fff;
        border-radius: .2em;
        z-index: 1;
        box-shadow: 0 .05em .85em rgba(0,0,0,.1);
        color: #575757;
        &::before {
            position: absolute;
            content: '';
            padding: .35em;
            top: -.4em;
            left: 1em;
            background: inherit;
            border: inherit;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(45deg);
            z-index: -1;
        }
    }
</style>
<script>
    /*import { on, off, addClass, removeClass } from '@/unit'*/
    /*import Transition from '@/mixins/transition.js';*/
    import ElCollapseTransition from '@/unit/collapse-transition.js';
    export default {
        name: "FfPopover",
        props: {
            content: String,
            show: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {

            }
        },
        components: {
            ElCollapseTransition
        },
        computed: {
            popover_show () {
                if(this.show) {
                    this.createPopover();
                }
                return this.show
            }//控制内容的显示
        },
        methods: {
            showPopper () {
                this.popover_show = !this.popover_show;
            },//显示消失气泡框
            createPopover () {
                this.$nextTick(() => {
                    let reference = this.$refs.reference.getBoundingClientRect();//获取左，上，右和下分别相对浏览器视窗的位置
                    let popper = this.$refs['popper'];
                    console.log(this.$refs.reference)
                    let top = 200;
                    let left = reference.left;
                    let width = reference.offsetWidth;
                    popper.setAttribute('style', `left: ${left}px; top: ${top}px; width: ${width}px; transform-origin: center top 0px; `);
                    document.body.appendChild(popper);
                })
            },//生成组件并添加到body下面
        },
        mounted () {
            //let reference = this.$refs.reference;//找到这个添加进去的内容
            //on(reference, 'click', this.showPopper);//为这个内容添加这个组件的监听事件
        },
        destroyed () {
            //let reference = this.$refs.reference;
            //off(reference, 'click', this.showPopper);//为这个内容删除这个组件的监听事件
        }
    }
</script>
